<template>
  <s-layout title="订单详情">
    <view
        style="
        width: 90%;
        height: 1000rpx;
        background-color: #fff;
        margin: 40rpx auto;
        position: relative;
        border-radius: 10rpx;
      "
    >
      <view
          style="
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          background-color: #f6f6f6;
          position: absolute;
          left: 50%;
          transform: translateX(-30rpx);
          top: -40rpx;
        "
      ></view>
      <view
          style="
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          background-color: #f6f6f6;
          position: absolute;
          left: -40rpx;
          top: 325rpx;
        "
      ></view>
      <view
          style="
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          background-color: #f6f6f6;
          position: absolute;
          right: -40rpx;
          top: 325rpx;
        "
      ></view>
      <view style="padding: 40rpx; border-bottom: 10rpx dashed #ccc">
        <view style="display: flex; justify-content: space-between">
          <view
              style="
              font-weight: 500;
              color: #ccc;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
            "
          >
            <p style="color: black; font-weight: 700; font-size: 50rpx">
              {{ order_info.movieName || "电影名称" }}
            </p>
            <p>
              {{ order_info.cinemaName || "影院名称" }}
            </p>
            <p>
              {{ order_info.roomName || "影厅名称" }}
            </p>
            <p>{{ order_info.addTime }}</p>
            <p>
              <text>{{ order_info.seats }}</text>
            </p>
            <p>{{ order_info.showAmount || 0 }}元</p>
          </view>
          <view>
            <img
                class="movie_info_pic"
                :src="order_info.movieLogo"
            /></view>
        </view>
      </view>
      <view style="margin-top: 60rpx; display: flex; justify-content: center">
        <qrcode width="300" height="300" unit="rpx" :data="url"
        />
      </view>
      <view
          v-for="(item, index) in order_info.ticketcodeList"
          :key="index"
          style="
          border: 4rpx solid #f6f6f6;
          width: 80%;
          height: 150rpx;
          line-height: 70rpx;
          margin: 40rpx auto;
          border-radius: 20rpx;
          color: gray;
        "
      >
        <view style="text-align: center">取票码:{{ item[0].name }}</view>
        <view style="text-align: center">验证码:{{ item[0].value }}</view>
      </view>
      <view @click="showMask" style="text-align: center; color: gray"
      >点击查看
      </view
      >
    </view>
    <!-- 全屏蒙版 -->
    <full-screen-mask :is-visible="isMaskVisible" @close="hideMask">
      <view style="display: flex; justify-content: center; align-items: center; height: 100%;">
        <img :src="img" alt="验证码" style="max-width: 90%; max-height: 90%;"/>
      </view>
    </full-screen-mask>
    <!-- 添加订单状态判断 -->
    <view v-if="order_info.status === 'S'">
      <view style="margin-top: 60rpx; display: flex; justify-content: center">
        <qrcode width="300" height="300" unit="rpx" :data="qrCodeUrl"/>
      </view>
      <!-- 修改取票码显示区域 -->
      <view v-for="(group, groupIndex) in order_info.ticketcodeList" :key="groupIndex"
            style="border: 4rpx solid #f6f6f6; width: 80%; height: auto; margin: 40rpx auto; border-radius: 20rpx; padding: 20rpx;">
        <view v-for="(item, index) in group" :key="index" style="text-align: center; color: gray; line-height: 60rpx;">
          {{ item.name }}: {{ item.value }}
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import {ref} from 'vue';
import {onLoad} from '@dcloudio/uni-app';
import sheep from "@/sheep";
import qrcode from "./components/ikun-qrcode/components/ikun-qrcode/ikun-qrcode.vue";
import FullScreenMask from "./components/fullScreenMask.vue";

// 响应式数据声明
const order_info = ref({});
const qrCodeUrl = ref("");
const url = ref("");
const img = ref("");
const isMaskVisible = ref(false);

// 生命周期钩子
onLoad(async (opt) => {
  if (!opt.orderId) {
    uni.showToast({icon: 'error', title: '订单号不存在'});
    return;
  }
  await getOrderInfo(opt.orderId);
});

// 蒙版控制方法
const showMask = () => {
  isMaskVisible.value = true;
  // 设置验证码图片数据
  img.value = qrCodeUrl.value; // 或从接口获取的验证码图片URL
};

const hideMask = () => {
  isMaskVisible.value = false;
};

// 获取订单信息
const getOrderInfo = async (orderId) => {
  try {
    const res = await sheep.$api.xkMovie.getXkMovieDetail({orderId: orderId});
    if (res.code === 200) {
      let orderInfo = JSON.parse(res.data.backParams);
      order_info.value = orderInfo;

      // 处理取票码数据生成二维码
      let ticketCodeList = orderInfo.ticketcodeList || [];
      let qrCodeValues = [];
      // 遍历所有取票码组
      ticketCodeList.forEach(group => {
        group.forEach(item => {
          // 提取值并去除可能的前缀
          let value = item.value;
          if (item.name.includes('取票码')) {
            value = value.replace(/^取票码:/, '');
          }
          qrCodeValues.push(value);
        });
      });

      // 多个值用|分隔组合
      qrCodeUrl.value = qrCodeValues.join('|');
      url.value = qrCodeUrl.value;
    } else {
      uni.showToast({icon: 'error', title: res.msg || '获取订单失败'});
    }
  } catch (error) {
    console.error('获取订单详情失败:', error);
    uni.showToast({icon: 'error', title: '网络请求失败'});
  }
};
</script>

<style lang="scss" scoped>
page {
  background: #3b4144;
}

.movie_info_pic {
  width: 186rpx;
  height: 266rpx;
  border-radius: 10rpx;
}

/* 原有样式保持不变 */
.movie {
  margin: 0 auto;
  border-radius: 13rpx;
  padding: 30rpx;
  margin-top: 49rpx;
  width: 630rpx;
  height: 666rpx;
  background: #fff;
  position: relative;
  background: radial-gradient(circle at left bottom, transparent 22rpx, #fff 0) top left / 346rpx 350rpx no-repeat,
  radial-gradient(circle at right bottom, transparent 22rpx, #fff 0) top right / 346rpx 350rpx no-repeat,
  radial-gradient(circle at left top, transparent 22rpx, #fff 0) bottom left / 346rpx 375rpx no-repeat,
  radial-gradient(circle at right top, transparent 22rpx, #fff 0) bottom right / 346rpx 375rpx no-repeat;

  &_status {
    position: absolute;
    z-index: 9;
    width: 150rpx;
    height: 150rpx;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1rpx dashed red;
    transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    -moz-transform: rotate(-8deg);
    -webkit-transform: rotate(-8deg);
    -o-transform: rotate(-8deg);

    &_bor {
      width: 138rpx;
      height: 138rpx;
      border-radius: 50%;
      border: 1rpx dashed red;
      display: flex;
      align-items: center;
      justify-content: center;
      color: red;
      font-size: $uni-font-size-base;
    }
  }

  &_del {
    position: absolute;
    width: 81rpx;
    height: 81rpx;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &_info {
    height: 266rpx;
    display: flex;
    flex-direction: row;

    &_pic {
      border-radius: 13rpx;
      width: 186rpx;
      height: 266rpx;
    }

    &_text {
      width: 410rpx;
      margin-left: 25rpx;
      padding: 8rpx 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: $uni-font-size-base;
      color: #fff;

      &_name {
        color: #000000;
        font-size: $uni-font-size-lg;
        font-weight: 900;
      }

      &_type {
        color: #000000;
        font-weight: 300;
        font-size: $uni-font-size-base;
      }

      &_time {
        font-weight: 300;
        color: #000000;
      }

      &_address,
      &_room {
        font-weight: 300;
        color: #000000;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
    }
  }

  &_line {
    position: absolute;
    top: 350rpx;
    left: 0;
    right: 0;
    height: 6rpx;
    margin: auto;
    width: 643rpx;
    background-size: 10px 100%;
  }

  &_notice {
    background: #fff;
    width: 100%;
    position: absolute;
    left: 0;
    padding-bottom: 33rpx;
    border-radius: 0 0 13rpx 13rpx;
    margin-top: 100rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    &_img {
      width: 266rpx;
      height: 266rpx;
    }
  }
}

.movieClose {
  margin: 0 auto;
  border-radius: 13rpx;
  padding: 30rpx;
  margin-top: 49rpx;
  width: 630rpx;
  height: 450rpx;
  background: #fff;
  position: relative;
}
</style>
